<template>
  <div class="wap">
    <div class="lottery_banner c-w100 c-p">
      <div class="c-pa lottery_user c-flex-row c-aligni-center c-justify-center">
        <img
          class="c-brp50"
          :src="$addXossFilter(user.headimgurl ||require('@/assets/defult_head.png'))"
          alt=""
        >
        <p class="c-fc-white c-fs20 c-ph10">{{user.nickname}}</p>
      </div>
      <div
        class="c-pa lottery_detail c-flex-row c-aligni-center c-justify-center c-fc-white c-fs20"
        @click="handleClickDetail"
      >活动详情</div>
      <div
        class="c-pa lottery_record c-flex-row c-aligni-center c-justify-center c-fc-white c-fs20"
        @click="handleClickRecord"
      >中奖记录</div>
      <div class="c-pa lottery_index c-flex-row c-aligni-center c-justify-center c-fc-white c-fs20" @click="handleClickIndex">返回首页</div>
    </div>
    <!-- 幸运大转盘 -->
    <div class="big-wheel-con">
      <div class="big-wheel-box" v-if="awardList.length > 0">
        <big-wheel
          width="11.3rem"
          height="11.3rem"
          ref="bigWheel"
          :prizeList="awardList"
          :borderColor="borderColor"
          :prizeBgColors="prizeBgColors"
          @over="over">
          <template v-slot:item="{item}">
            <div class="prize-name">{{item.awardType == 0 ? noWinDesc : item.awardName}}</div>
            <img class="prize-img" :src="$addXossFilter(item.awardType == 0 ? noWinImg : item.awardImgUrl)" :alt="item.awardType == 0 ? noWinDesc : item.awardName">
          </template>
        </big-wheel>
        <div class="big-wheel-boxRoite"></div>
        <!-- 按钮 -->
        <!-- joinType:0不限，1会员 2指定用户群 -->
        <template v-if="(joinType == 0&&((joinLimitType==1&&isBuyProd==1)||joinLimitType==0))||
          (joinType == 1 && (user.isVip == 1&&((joinLimitType==1&&isBuyProd==1)||joinLimitType==0)))||
          (joinType == 2 && (isInGroup == 1&&((joinLimitType==1&&isBuyProd==1)||joinLimitType==0)))">
          <div class="big-wheel-btn" v-if="status == 1" @click="startLottery">
            <!-- 次数用关了lastLotteryCount 并且开启消耗积分consumeType且积分数大于消耗数 -->
            <template v-if="allowContinueStatus == 1">
              <img src="../../../assets/interaction/new/type-draw_new.png" alt="">
            </template>
            <!-- 次数用光了 且 没开启积分 或者  次数用光了 且 开启积分 并且 积分数小于消耗数 -->
            <template v-else-if="allowContinueStatus == 0 && lotteryType == 1">
              <img src="../../../assets/interaction/new/type-noneDisable_new.png" alt="">
            </template>
            <!-- 当前为每天抽得类型  并且  次数用光了 -->
            <template v-else-if="lotteryType == 0 && allowContinueStatus == 0">
              <img src="../../../assets/interaction/new/type-back_new.png" alt="">
            </template>
            <template v-else>
              <img src="../../../assets/interaction/new/type-free_new.png" alt="">
            </template>
          </div>
          <!-- 活动未开始 -->
          <div class="big-wheel-btn" v-else-if="status == 0" @click="startLottery">
            <img src="../../../assets/interaction/new/not-started_new.png" alt="">
          </div>
          <!-- 活动已结束 -->
          <div class="big-wheel-btn" v-else-if="status == 2" @click="startLottery">
            <img src="../../../assets/interaction/new/event-over_new.png" alt="">
          </div>
        </template>
        <!-- joinLimitType = 1 && isBuyProd=1 buyProdList -->
        <template v-else-if="joinType == 2 && isInGroup==0">
          <div class="big-wheel-btn" v-if="status == 1" @click="startLottery">
            <img src="../../../assets/interaction/new/type-draw_new.png" alt="">
          </div>
          <!-- 活动未开始 -->
          <div class="big-wheel-btn" v-else-if="status == 0" @click="startLottery">
            <img src="../../../assets/interaction/new/not-started_new.png" alt="">
          </div>
          <!-- 活动已结束 -->
          <div class="big-wheel-btn" v-else-if="status == 2" @click="startLottery">
            <img src="../../../assets/interaction/new/event-over_new.png" alt="">
          </div>
        </template>
        <!-- joinLimitType = 1 && isBuyProd=1 buyProdList -->
        <template v-else-if="joinLimitType == 1&&isBuyProd==0">
          <div class="big-wheel-btn" v-if="status == 1" @click="SureBuy">
            <img src="../../../assets/interaction/new/type-buy_new.png" alt="">
          </div>
          <!-- 活动未开始 -->
          <div class="big-wheel-btn" v-else-if="status == 0" @click="startLottery">
            <img src="../../../assets/interaction/new/not-started_new.png" alt="">
          </div>
          <!-- 活动已结束 -->
          <div class="big-wheel-btn" v-else-if="status == 2" @click="startLottery">
            <img src="../../../assets/interaction/new/event-over_new.png" alt="">
          </div>
        </template>
        <template v-else>
          <div class="big-wheel-btn" v-if="status == 1" @click="handleClickOpenShip">
            <img src="../../../assets/interaction/new/type-open_new.png" alt="">
          </div>
          <!-- 活动未开始 -->
          <div class="big-wheel-btn" v-else-if="status == 0" @click="startLottery">
            <img src="../../../assets/interaction/new/not-started_new.png" alt="">
          </div>
          <!-- 活动已结束 -->
          <div class="big-wheel-btn" v-else-if="status == 2" @click="startLottery">
            <img src="../../../assets/interaction/new/event-over_new.png" alt="">
          </div>
        </template>
      </div>
      <!-- 底座 -->
      <div class="big-wheel-bottom-con">
        <div class="big-wheel-bottom">
          <img src="../../../assets/interaction/new/disk_bg-bottom.png" alt="">
          <div class="lottery_points">我的{{ customPointName }}:
            <span class="c-fs24 c-fw-b">{{user.points}}</span>
          </div>
          <template v-if="(joinType == 0&&((joinLimitType==1&&isBuyProd==1)||joinLimitType==0))||
            (joinType == 1 && (user.isVip == 1&&((joinLimitType==1&&isBuyProd==1)||joinLimitType==0)))||
            (joinType == 2 && (isInGroup == 1&&((joinLimitType==1&&isBuyProd==1)||joinLimitType==0)))">
            <template v-if="status == 1">
              <div class="remain-times" v-if="allowContinueStatus == 1">{{`${consumeCount}${customPointName}/次`}}</div>
              <div class="remain-times" v-if="allowContinueStatus == 2">{{`剩余${lastLotteryCount}次`}}</div>
            </template>
          </template>
          <template v-else-if="joinType == 2 && isInGroup==0">
            <template v-if="status == 1">
              <div class="remain-times">仅限指定用户参与</div>
            </template>
          </template>
          <template v-else-if="joinLimitType == 1&&isBuyProd==0">
            <template v-if="status == 1">
              <div class="remain-times">仅限购后参与</div>
            </template>
          </template>
          <template v-else>
            <template v-if="status == 1">
              <div class="remain-times">仅限会员参与</div>
            </template>
          </template>
          <!-- 祥云 -->
          <div class="lottery_cloud"></div>
        </div>
      </div>
      <!-- 狮子 -->
      <div class="lottery_lion"></div>
    </div>
    <!-- 中奖名单 -->
    <div class="big-wheel-prizers"></div>
    <div
      class="prizerList"
      id="prizerList"
    >
      <ul id="prizerList1">
        <li
          class="c-textAlign-l c-flex-row c-aligni-center c-justify-center c-w50 c-hh40 c-mb20 c-fs20"
          v-for="(item,index) in awardLogList"
          :key="index"
        >
          <span class="c-text-ellipsis1 c-w50 ">{{item.nickname}}</span>
          <span class="c-text-ellipsis1 c-w50 ">{{item.awardName}}</span>
        </li>
      </ul>
      <ul id="prizerList2"></ul>
    </div>
    <div
      class="c-w100 c-h c-pf c-p-t0 c-p-l0 c-p-b0 c-p-r0 c-translucent-balck50 c-pz6"
      v-show="prizeInfoShow"
    >
      <div class="havePrize c-flex-row c-justify-center">
        <!-- 关闭按钮 -->
        <div
          class="havePrize-close c-pa iconfont c-fc-white c-fs50"
          @click.stop="handleClickPrizeClose"
        >&#xe84e;</div>
        <!-- 文案 -->
        <template v-if="isHaveBlance !== 0">
          <div
            class="havePrize-msg c-pa c-fs40 c-text-ellipsis1"
            :class="awardType == 0 ? 'nowin' : 'win'"
          >{{awardType == 0 ? nowinMsg : '恭喜您中奖啦'}}
          </div>
          <!-- 中奖图片 -->
          <div class="c-pa c-ww180 c-hh180 havePrize-img">
            <img
              :src="$addXossFilter(prizeObject.awardImgUrl)"
              alt=""
            >
          </div>
          <!-- 中奖名称 -->
          <div class="c-pa c-text-ellipsis1 havePrize-name c-fs24 c-fc-xblack">{{prizeObject.awardName}}</div>
        </template>
        <template v-else>
          <div class="havePrize-msg c-pa c-fs40 c-text-ellipsis1 nowin">奖品已领完
          </div>
          <!-- 奖品已领完图片 -->
          <div class="c-pa c-ww240 c-hh180 havePrize-img">
            <img
              src="../../../assets/interaction/type-collected.png"
              alt=""
            >
          </div>
        </template>
        <!-- 继续抽奖按钮 -->
        <div
          class="havePrize-btn c-pa"
          @click.stop="handleClickPrizeClose"
        ></div>
        <!-- 领取奖品，查看奖品 -->
        <template v-if="isMallGoods == 0">
          <div
            class="havePrize-get c-pa c-fs22"
            v-show="awardType !== 0 && isHaveBlance !== 0"
            @click.stop="handleClickPrize(prizeUrl,awardType)"
          >{{awardType == 3 ? '领取奖品' : '查看奖品'}}</div>
        </template>
        <template v-else>
          <div
            class="havePrize-get c-pa c-fs24"
            v-show="awardType !== 0 && isHaveBlance !== 0"
            @click.stop="handleClickPrize(prizeUrl,awardType)"
          >领取商城奖品</div>
        </template>
      </div>
    </div>
    <cust-dialog :showModal="isStartShowQr && isAllowJoin == 0" class="detailsModal">
      <div class="c-ww540 c-pt60 c-pb60 c-ph120 c-bg-white c-br20 c-text-hidden c-m-0auto">
        <div class="c-ww300 c-fc-xblack c-fs24 c-textAlign-c c-pb15">关注公众号</div>
        <div class="c-ww300 c-fc-xblack c-fs24 c-textAlign-c">快来一起幸运大转盘</div>
        <div v-if="openPlat">
          <img
            class="c-w100"
            :src="$addXossFilter(openPlat.qrcode)"
          />
        </div>
        <div class="c-ww300 c-fc-xblack c-fs24 c-textAlign-c c-fc-gray">长按识别二维码关注</div>
      </div>
    </cust-dialog>
    <cust-dialog :showModal="isDetails" class="detailsModal">
      <div class="c-ww540 c-bg-white c-br20 c-text-hidden c-m-0auto">
        <div class="c-hh64 c-bd-b1 c-flex-column c-justify-center c-aligni-center c-fs24">活动详情</div>
        <div class="c-ph24 c-mv32 c-maxh600 c-contexty-scroll">
          <div class="c-fs20 c-fc-gray c-mb10">活动时间</div>
          <div class="c-fs22 c-fc-xblack c-mb40">{{TurntableDetail.beginTime}}至{{TurntableDetail.endTime}}</div>
          <div class="c-fs20 c-fc-gray c-mb10">主办方</div>
          <div class="c-fs22 c-fc-xblack c-mb40">{{TurntableDetail.companyName}}</div>
          <div class="c-fs20 c-fc-gray c-mb10">活动详情：</div>
          <div class="c-fs22 c-fc-xblack c-ws-pw" v-html="TurntableDetail.activityContent"></div>
        </div>
        <div
          @click="getChange(2)"
          class="c-ww40 c-opacity50 c-bg-ccc c-br-bl20 c-hh40"
          style="position: absolute;z-index:9999;top:0;right:0"
        >
          <i class="iconfont c-fs16 c-fc-white c-pa c-p-t12 c-p-l12">&#xe8fd;</i>
        </div>
      </div>
    </cust-dialog>
    <open-modal
      :openModal="openModal"
      @closeModal="closeModal"
    >
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-pr24 c-pb30 c-pl24 c-maxh760 ">
        <template v-if="addressInfo !== null">
          <div class="c-flex-row c-aligni-center c-justify-center c-p c-bd-b1 c-hh64">
            <span class="c-fs24 c-fc-xblack">收货地址</span>
            <span
              class="c-fs24 iconfont c-pa c-p-r24 c-fc-gray"
              @click="handleClickModal"
            >&#xe8fd;</span>
          </div>
          <div class="c-flex-row c-aligni-center c-hh80 c-bd-b1">
            <span class="c-ww150 c-fs24 c-fc-gray">收件人</span>
            <input
              type="text"
              v-model="addressInfo.name"
              :disabled="disabled"
              class="input-right c-fs28 c-flex-grow1 c-w0 c-fc-xblack"
              placeholder="收件人"
            >
          </div>
          <div class="c-flex-row c-aligni-center c-hh80 c-bd-b1">
            <span class="c-ww150 c-fs24 c-fc-gray">联系电话</span>
            <input
              type="tel"
              :disabled="disabled"
              v-model="addressInfo.mobile"
              class="input-right c-fs28 c-flex-grow1 c-w0  c-fc-xblack"
              placeholder="联系电话"
            >
          </div>
          <div class="c-flex-row c-aligni-center c-hh80 c-bd-b1">
            <span class="c-ww150 c-fs24 c-fc-gray">所在地区</span>
            <div class="c-flex-row c-flex-grow1 c-w0 c-fs28  c-fc-xblack picker-address">
              <x-address
                value-text-align='left'
                title=""
                :disabled="disabled"
                v-model="addrValue"
                :list="addressData"
                raw-value
                placeholder="请选择地址"
                :show.sync="showAddress"
                class="c-flex-grow1"
                @on-hide='valuetrue'
                @on-shadow-change="onShadowChange"
                :themeColor="$getThemeColor()"
              ></x-address>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-hh80 c-bd-b1">
            <span class="c-ww150 c-fs24 c-fc-gray">详细地址</span>
            <input
              type="text"
              :disabled="disabled"
              v-model="addressInfo.address"
              class="input-right c-fs28 c-flex-grow1 c-w0  c-fc-xblack"
              placeholder="街道、楼牌号等"
            >
          </div>
          <div
            class="c-hh72 c-fs24 c-fc-white c-br36 c-lh72 c-textAlign-c c-mt48 havePriz-comit"
            @click="handleClickCommit"
          >提交</div>
          <!-- 选择切换收货地址：只有商城商品才有 -->
          <div
            class="c-fs24 c-fc-gray c-flex-row c-justify-center c-aligni-center c-mt48"
            v-show="isMallGoods == 1"
            @click="handleClickAddress"
          >选择收货地址</div>
        </template>
        <template v-else>
          <div class="c-flex-row c-aligni-center c-justify-center c-p c-bd-b1 c-hh64">
            <span class="c-fs24 c-fc-xblack">收货地址</span>
            <span
              class="c-fs24 iconfont c-pa c-p-r24 c-fc-gray"
              @click="handleClickModal"
            >&#xe8fd;</span>
          </div>
          <div class="c-hh320 c-pt120 c-flex-row c-justify-center c-fs24 c-fc-gray">暂无收货地址，请点击新建收货地址</div>
          <div
            class="c-hh72 c-fs24 c-br36 c-lh72 c-textAlign-c c-mt48 address-ship"
            @click="handleClickAddress"
          >新建收货地址</div>
        </template>
      </div>
    </open-modal>
    <cust-dialog :showModal="sureFlag" class="sureBox">
      <div class="c-pt40">
        <div class="c-ph24">
          <div class="c-fs28 c-fw800 c-textAlign-c">购买以下商品获得抽奖资格</div>
          <div class="c-mt30 c-flex-row">
            <div class="c-ww180 c-br8 c-text-hidden"><img :src="prodList?prodList.cover:require('../../../assets/defult270.png')" alt=""></div>
            <div class="c-ml16 c-ww260">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-lh24 c-hh72 c-lh36">{{prodList?prodList.name:''}}</div>
              <div class="c-fc-xxmred c-fs28 c-mt12">{{'￥' | iosPriceFilter}}{{prodList?prodList.price:'0.00'}}</div>
            </div>
          </div>
        </div>
        <footer class="c-fs20 c-flex-row c-fs28 c-bd-t1 c-mt30">
          <div @click="showSureNone" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 c-fc-gray c-bd-r1">取消</div>
          <div @click="handleClickOpenProd(prodList.prodType, prodList.courseType, prodList.prodId)" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 c-fc-xxmred">去购买</div>
        </footer>
      </div>
    </cust-dialog>
  </div>
</template>

<script>
import { XAddress } from 'ckjrweb-mp-ui/src/components/index';
import { utilJs } from "@/utils/common.js";
import openModal from "@/components/templates/common/openModal.vue";
import { goDetails } from "@/utils/goDetails.js";
import custDialog from "@/components/templates/common/custDialog.vue";
import BigWheel from "@/components/templates/bigWheel/bigWheel.vue"
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
export default {
  name: "TurnTable",
  components: {
    openModal,
    XAddress,
    custDialog,
    BigWheel
  },
  data() {
    return {
      prizeIndex: 0, // 当前转到哪个位置
      timer: 0, // 每次转动定时器
      turnTimer: 0, // 无缝滚动定时器
      speed: 200, // 初始转动速度
      times: 0, // 转动次数
      cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      prize: 0, // 中奖位置
      isMaskli: false, // 遮罩
      clickFlage: true, //点击事件，防止重复点击
      submitFlage: true, //领取奖品，防止重复点击
      showToast: false, //显示中奖弹窗
      arrNum: [0, 1, 2, 3, 5, 7, 11, 10, 9, 8, 6, 4], // 定义转动的顺序
      isStartShowQr: false, //是否关注过公众号
      prizeInfoShow: false, //显示中奖
      // 接口参数
      taId: '', // 活动id
      award: {}, //奖品列表信息
      awardList: [],
      awardLogList: [], //获奖中奖名单
      beginTime: '', //活动开始时间
      consumeCount: 0, //消耗数量，0则为0，1则对应相应的积分
      consumeType: 0, //消耗类型 0:不消耗,1消耗积分
      endTime: '', //活动结束时间
      isAllowJoin: 0, //是否允许参与抽奖 0：不允许  1：允许（在不允许 的情况下需要弹出公众号二维码让用户关注）
      lastLotteryCount: 0, // 剩余抽奖次数
      joinType: 0, // 参与人群，0限制，1会员2指定用户群
      isInGroup: 0, //是否满足指定用户群
      joinLimitType: 0, //参与类型
      isBuyProd: 0, //是否购买
      noWinDesc: '', //未中奖描述
      noWinImg: '', // 未中奖图片
      noWinShowText: '', //noWinShowText
      openPlat: {}, //二维码信息
      status: 0, //0:未开始 1:已开始 2:已结束
      shareDesc: '', //分享描述
      shareImgUrl: '', //分享图片
      shareTitle: '', //分享标题
      user: {}, //用户信息
      lotteryType: 0, //抽奖周期类型0每天，1每次活动
      allowContinueStatus: 0,
      // 抽奖操作
      awardTapId: 0, // 奖品id
      isHaveBlance: 0, // 是否还有奖品
      error: "", // 当status=0时，可提示此失败信息
      awardType: "", //0:未中奖 1 积分 2虚拟奖品 3 实物奖品
      looteryStatus: 0,
      looteryIndex: 0, //中奖位置，后台传得
      nowinMsg: "",
      prizeObject: {}, //中奖奖品信息
      prizeUrl: "",
      talId: "",
      prizeStatus: 0, //抽奖状态
      isMallGoods: 0, //0非商城奖品1商城奖品
      prodId: "", //产品id
      changePoints: 0,
      packageStatus: 0, //0包邮，1需要邮费
      // 获取活动详情
      isDetails: false,
      TurntableDetail: {},
      // 领取奖品地址
      openModal: false,
      addressInfo: {
        no: 1,
        name: "",
        mobile: "",
        provinceId: "",
        cityId: "",
        areaId: "",
        address: "",
      },
      addrValue: [],
      addressData: [],
      showAddress: false,
      pickAddressValue: [],
      pickAdress: '',
      disabled: false, //地址信息是否可以编辑
      shopInfo: [], //商品详情
      turntableData: {},
      freeShipping: 0,
      sureFlag: false,
      prodList: {},
      borderColor: '#CA1C2A',
      prizeBgColors: ['#fde2c3', '#fff'],
      bindPhoneSetting: null,
      customPointName: localStorage.getItem("customPointName"),
    }
  },
  creadted() {
    utilJs.appShare(this);
  },
  mounted() {
    window.addEventListener("contextmenu", function (e) {
      e.preventDefault();
    });
  },
  activated() {
    // 初始化页面数据
    setDocumentTitle("大转盘");
    this.submitFlage = true;
    this.prizeInfoShow = false;
    this.taId = this.$route.query.taId || "";
    if (this.isMallGoods == 1) {
      if (localStorage.getItem("AddressInfo")) {
        this.addressInfo = JSON.parse(localStorage.getItem("AddressInfo"));
        setTimeout(() => {
          this.addrValue = [
            "" + this.addressInfo.provinceId,
            "" + this.addressInfo.cityId,
            "" + this.addressInfo.areaId
          ]
        }, 10)
        localStorage.removeItem('AddressInfo');
      }
    } else {
      // this.addrValue = [];
      this.addressInfo = {
        no: 1,
        name: "",
        mobile: "",
        provinceId: "",
        cityId: "",
        areaId: "",
        address: "",
      };
    }

    clearInterval(this.turnTimer);
    getBindPhoneSetting(128).then(res => {
      this.bindPhoneSetting = res;
    });
    this.initData();
  },
  deactivated() {
  },
  methods: {
    handleClickIndex() {
      this.$routerGo(this, "push", { path: '/'})
    },
    //关闭购买弹窗
    showSureNone() {
      this.sureFlag = false
    },
    handleClickNonePermission() {
      this.$cjConfirm({
        title: '抽奖提示', //
        titleCenter: true, //标题是否居中
        message: '您暂无抽奖资格', //弹窗内容
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: false, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '', //确认按钮文本
        onConfirm() {
        }, //确认事件回调
        onCancel() {
        }, //取消事件回调
      })
    },
    initData() {
      let _this = this;
      _this.getWxTurntableInfo();
    },
    // 获取活动详情
    getWxTurntableDetail() {
      let _this = this;
      utilJs.getMethod(global.apiurl + "activity/turntable/getWxTurntableDetail?taId= " + this.taId + " ", res => {
        _this.TurntableDetail = res;
      })
    },
    // 进行抽奖操作
    getTurntableAward() {
      let _this = this;
      utilJs.postMethod(global.apiurl + "activity/turntable/turntableAward", { taId: this.taId, md5Key: _this.award.md5Key }, res => {
        _this.lastLotteryCount = res.lastLotteryCount;
        _this.awardTapId = res.awardTapId;//奖品id
        _this.isHaveBlance = res.isHaveBlance;//是否还有奖品
        _this.prizeStatus = res.status;
        _this.error = res.error;//失败信息
        _this.awardType = res.awardType;//0:未中奖 1 积分 2虚拟奖品 3 实物奖品
        _this.nowinMsg = res.showDesc;
        _this.prizeUrl = res.url;
        _this.talId = res.talId;
        _this.changePoints = res.points;
        _this.allowContinueStatus = res.allowContinueStatus;
        _this.isMallGoods = res.isMallGoods;
        _this.prodId = res.prodId;
        _this.addressInfo = res.address;
        _this.packageStatus = res.packageStatus;
        // 获取当前获奖位置index
        _this.award.awardList.forEach((el, index) => {
          if (el.tapId == _this.awardTapId) {
            let object = {
              awardImgUrl: el.awardImgUrl || _this.noWinImg,
              awardName: el.awardName,
              awardType: el.awardType,
              tapId: el.tapId
            }
            _this.prizeObject = object;
            _this.looteryIndex = index;
          }
        })
        if (_this.prizeStatus == 1) {
          // _this.startRoll();
          // 转动转盘
          _this.$refs.bigWheel.rotate(_this.looteryIndex);
        }
        // 判断为商城商品时，需要禁止编辑
        if (_this.isMallGoods == 1) {
          _this.disabled = true;
          _this.addressInfo = res.address;
          _this.addrValue = res.address !== null ? [
            "" + res.address.provinceId,
            "" + res.address.cityId,
            "" + res.address.areaId
          ] : []
        } else {
          _this.addressInfo = {
            no: 1,
            name: "",
            mobile: "",
            provinceId: "",
            cityId: "",
            areaId: "",
            address: "",
          };
          // _this.addrValue = [];
        }
      }, errorCallBack => {
        location.reload();
      })
    },
    // 转盘结束后续操作
    execWxTurntableOver() {
      utilJs.postMethod(global.apiurl + "activity/turntable/execWxTurntableOver", { talId: this.talId }, res => {
      })
    },
    // 设置转盘页信息
    getWxTurntableInfo() {
      let _this = this;
      utilJs.getMethod(global.apiurl + "activity/turntable/getWxTurntableInfo?taId= " + this.taId + " ", res => {
        // 奖品及中奖名单
        _this.award = res.award;
        _this.awardList = _this.award.awardList;
        _this.awardLogList = res.awardLogList;
        // 未中奖信息
        _this.noWinDesc = res.noWinDesc;
        _this.noWinImg = res.noWinImg;
        // 开始结束时间及当前状态
        _this.beginTime = res.beginTime;
        _this.endTime = res.endTime;
        _this.status = res.status;
        // 消耗数量及类型
        _this.consumeCount = res.consumeCount;
        _this.consumeType = res.consumeType;
        // 是否允许参与抽奖，及抽奖次数
        _this.isAllowJoin = res.isAllowJoin;
        _this.lastLotteryCount = res.lastLotteryCount;
        // 二维码信息
        _this.openPlat = res.openPlat;
        if (_this.isAllowJoin == 0) {
          _this.isStartShowQr = true; //未关注公众号
          _this.clickFlage = false;
        }
        // 抽奖周期类型
        _this.lotteryType = res.lotteryType;
        // 分享信息
        _this.shareTitle = res.shareTitle;
        _this.shareDesc = res.shareDesc;
        _this.shareImgUrl = res.shareImgUrl;
        // 参与人群
        _this.joinType = res.joinType;
        //指定用户群
        _this.isInGroup = res.user.isInGroup
        //参与类型
        _this.joinLimitType = res.joinLimitType;
        //是否购买
        _this.isBuyProd = res.user.isBuyProd;
        _this.prodList = res.user.buyProdList[0]
        // 用户信息
        _this.user = res.user;
        // 0：次数已用完并且没有开启积分或有开启积分但积分不足， 1：次数已用完，但有开启积分并且积分足够2：还有剩余次数
        _this.allowContinueStatus = res.allowContinueStatus;
        if (_this.lastLotteryCount == 0 && _this.consumeCount == 0) {
          // 如果抽奖次数为0且没有积分了
          _this.clickFlage = false;
        }
        // 请求数据
        if (_this.awardLogList && _this.awardLogList.length >= 6) {
          _this.prizerListScroll();
        }
        _this.getWxTurntableDetail();
        _this.getAddressData();
        _this.wechatShare();
      }, failRes => {
        _this.$routerGo(_this, "replace", { path: "/error/emptyPage", query: { from: 'reservation', info: '活动可能已结束，请下次及时参加！' } });
      })
    },
    getAddressData() {
      let _this = this;
      utilJs.getMethod(`${global.apiurl}common/getAreaListForAgent`, res => {
        _this.addressData = res.data;
      }, failRes => {
      });
    },
    closeModal() {
      this.addrValue = [];
      this.openModal = false;
    },
    // 点击转动
    startLottery() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (this.status == 0) {
        // 未开始
        this.$showCjToast({
          text: "活动尚未开始",
          type: "warn",
        });
        return;
      }
      if (this.status == 2) {
        // 已经结束
        this.$showCjToast({
          text: "活动已经结束",
          type: "warn",
        });
        return;
      }
      // 判断剩余抽奖次数
      if (this.lastLotteryCount > 0) {
        if (this.clickFlage) {
          // 判断活动是否开始
          if (this.status == 1) {
            // 活动开始
            this.clickFlage = false// 不能点击
            this.getTurntableAward();
          }
        }
      } else {
        // 没有抽奖机会了，但是如果有开启积分且积分数不为0都可抽奖
        if (this.allowContinueStatus == 1) {
          if (this.clickFlage) {
            this.clickFlage = false// 不能点击
            this.getTurntableAward();
          }
        } else {
          if (this.consumeType == 0) {
            this.$showCjToast({
              text: "次数用光了",
              type: "warn",
            });
          } else {
            this.$showCjToast({
              text: `次数用光了且${this.customPointName}不足`,
              type: "warn",
            });
          }
        }
      }
    },
    handleClickOpenShip() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$routerGo(this, "push", {
        path: "/member/vip/vipUp"
      })
    },
    SureBuy() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.sureFlag = true
    },
    handleClickOpenProd(type, srhSort, id) {
      this.sureFlag = false
      type = type == global.ckFrom.live ? (srhSort == 40 ? global.ckFrom.live : global.ckFrom.privateClass) : type;
      goDetails(this, type, id, '', srhSort, 1);
    },
    prizeInfo() {
      // 弹出是否中奖
      setTimeout(() => {
        this.prizeInfoShow = true;
      }, 800)
    },
    handleClickPrizeClose() {
      // 关闭中奖
      this.prizeInfoShow = false;
    },
    handleClickModal() {
      this.addrValue = [];
      this.openModal = false;
    },
    onShadowChange(index, item) {
      this.pickAddressValue = index;
      this.pickAdress = item;
    },
    valuetrue() {
      this.addrValue = this.pickAddressValue;
    },
    handleClickPrize(url, type) {
      if (this.packageStatus == 0) {
        if (type == 3 || type == 4) {
          this.openModal = true;
        } else {
          let goPath = url.match(/#(\S*)/)[1];
          this.$routerGo(this, "push", {
            path: goPath
          });
        }
      } else {
        this.getShopInfo();
      }
    },
    getShopInfo() {
      utilJs.getMethod(
        global.apiurl + "goods/goodsDetail?mgId=" + this.prodId + "&talId=" + this.talId,
        res => {
          this.shopInfo = res.goods;
          this.turntableData = res.turntableData;
          this.freeShipping = res.freeShipping
          let shopInfo = [
            {
              mgId: this.shopInfo.mgId,
              mcId: "",
              avatar: this.shopInfo.avatar ? this.shopInfo.avatar : "",
              pointsDeduct: 0,
              name: this.shopInfo.name,
              price: this.turntableData.price,
              originalPrice: this.shopInfo.originalPrice,
              quantity: 1,
              shopSpecInfo: "",
              gsiiId: "",
              postage: this.shopInfo.postage,
              isMail: this.shopInfo.isMail,
              isMallExpressDeliver: this.shopInfo.isMallExpressDeliver,
              isMallOfflineDeliver: this.shopInfo.isMallOfflineDeliver,
              stock: 1,
              salesStock: "",
              collageStock: "",
              freeShipping: this.freeShipping,
              isFlashSales: false,
              isCollage: false,
              pId: "",
              noLimit: false,
              vipDiscount: 0,
              svipDiscount: 0,
              agentDiscount: 0,
              partnerDiscount: 0,
              branchDiscount: 0,
              isTurntable: true,
              limitType: -1,
              limitNumber: 0,
              purchasedNum: 0
            }
          ];
          if (this.shopInfo.valuationMethod && this.shopInfo.valuationMethod == 2 && this.shopInfo.freightMode == 1) {
            shopInfo.valuationMethod = this.shopInfo.valuationMethod;
          }
          sessionStorage.setItem("shopBuyInfo", JSON.stringify(shopInfo));
          let goPath = "/mall/shopSettlement/shopSettlement?shopNo=" + this.prodId + "&talId=" + this.talId + "&taId=" + this.taId;
          this.$routerGo(this, "push", {
            path: goPath
          });
        }
      );
    },
    closePrizeInfo() {
      // 关闭没中奖
      this.prizeInfoShow = false;
    },
    // 转盘转完事件
    over(prizeInfo) {
      this.clickFlage = true
      this.prizeInfo();//弹出中奖
      this.user.points = this.changePoints;
      this.execWxTurntableOver();
    },
    prizerListScroll() {
      this.$nextTick(() => {
        var prizerList2 = document.getElementById('prizerList2')
        var prizerList1 = document.getElementById('prizerList1')
        var prizerList = document.getElementById('prizerList')
        prizerList2.innerHTML = prizerList1.innerHTML
        this.turnTimer = setInterval(() => {
          if (prizerList.scrollTop >= prizerList1.offsetHeight) {
            prizerList.scrollTop = 0
          } else {
            prizerList.scrollTop++
          }
        }, 50)
      })
    },
    handleClickDetail() {
      this.isDetails = true;
    },
    handleClickRecord() {
      this.$routerGo(this, "push", {
        path: "/homePage/marketing/winningRecord",
        query: {
          taId: this.taId
        }
      })
    },
    getChange(type) {
      if (type == 1) {
        this.isStartShowQr = false
      } else if (type == 2) {
        this.isDetails = false;
      }
    },
    handleClickAddress() {
      // 新增收货地址跳转
      this.$routerGo(this, "push", {
        path: "/mall/shippingAddress/addressList"
      })
    },
    handleClickCommit() {
      let _this = this;
      let saveData;
      let apiurl;
      if (_this.isMallGoods == 1) {
        // 商城商品
        saveData = {
          talId: _this.talId,
          userAddressId: _this.addressInfo.addrId
        }
        apiurl = 'activity/turntable/submitWxMallOrder';
      } else {
        saveData = {
          talId: _this.talId,
          realName: _this.addressInfo.name,
          mobile: _this.addressInfo.mobile,
          address: _this.addressInfo.address,
          provinceId: _this.addrValue.length > 0 ? _this.addrValue[0] : "",
          cityId: _this.addrValue.length > 1 ? _this.addrValue[1] : "",
          areaId: _this.addrValue.length > 2 ? _this.addrValue[2] : "",
        }
        apiurl = 'activity/turntable/setTurntableLogInfo';
      }

      if (!_this.checkAddressInfo()) {
        return
      }
      if (this.submitFlage) {
        this.submitFlage = false;
        utilJs.postMethod(global.apiurl + apiurl, saveData, res => {
          _this.$showCjToast({
            text: "提交成功",
            type: "success",
          });
          _this.handleClickPrizeClose();
          _this.handleClickModal();
          _this.submitFlage = true;
        }, failRes => {
          this.submitFlage = true;
        })
      }
    },
    checkAddressInfo() {
      if (!this.addressInfo.name) {
        this.$showCjToast({
          text: "收货人姓名不能为空",
          type: "warn",
        });
        return false;
      } else if (!utilJs.isPhoneNumber(this.addressInfo.mobile)) {
        this.$showCjToast({
          text: "请输入正确的手机号",
          type: "warn",
        });
        return;
      } else if (this.addrValue.length <= 0) {
        this.$showCjToast({
          text: "收货人地址不能为空",
          type: "warn",
        });
        return false;
      } else if (!this.addressInfo.address) {
        this.$showCjToast({
          text: "收货人详细地址不能为空",
          type: "warn",
        });
        return false;
      }
      return true;
    },
    //分享
    wechatShare: function () {
      let title = this.shareTitle;
      let shareImg = this.shareImgUrl;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?taId=${this.taId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.shareDesc;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    //手机端分享
    appShare: function () {
      let title = this.shareTitle;
      let shareImg = this.shareImgUrl;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?taId=${this.taId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.shareDesc;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  }
}
</script>

<style lang="less" scoped>
* {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
input, textarea {
  -webkit-user-select:auto;
}
.c-full-height /deep/ .vux-masker-fullscreen {
  height: 100%;
}
ul,
li {
  list-style-type: none;
}
.wap {
  overflow: hidden;
  background: #B91730 url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/interaction/new/banner_bg.png") no-repeat top center;
  background-size: cover;
}
.wap .lottery_banner {
  height: 5.425rem;
}
.wap .lottery_banner .lottery_user {
  top: 0.65rem;
  left: 0.65rem;
}
.wap .lottery_banner .lottery_user img {
  width: 1.275rem;
  height: 1.275rem;
}
.wap .lottery_banner .lottery_detail {
  top: 0.65rem;
  right: 0;
  width: 2.4rem;
  height: 0.8rem;
  border-radius: 0.4rem 0 0 0.4rem;
  background: rgba(74, 14, 0, 0.3);
}
.wap .lottery_banner .lottery_points {
  top: 5.85rem;
  right: 0.65rem;
  min-width: 4.7rem;
  padding: 0 0.45rem;
  height: 0.8rem;
  border-radius: 0.4rem;
  background: rgba(74, 14, 0, 0.3);
  font-size: 0.5rem;
  color: #fff;
}
.lottery_record {
  top: 1.9rem;
  right: 0;
  width: 2.4rem;
  height: 0.8rem;
  border-radius: 0.4rem 0 0 0.4rem;
  background: rgba(74, 14, 0, 0.3);
}
.lottery_index {
  top: 3.15rem;
  right: 0;
  width: 2.4rem;
  height: 0.8rem;
  border-radius: 0.4rem 0 0 0.4rem;
  background: rgba(74, 14, 0, 0.3);
}
.wap .lottery {
  position: relative;
  animation: changeBg 0.5s ease infinite;
  width: 14.75rem;
  height: 14.75rem;
  padding: 0.425rem;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}
.prizers {
  padding: 0 0.65rem;
}
.prizerList {
  width: 13.7rem;
  height: 5rem;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  background: #fff;
  margin-top: 0.3rem;
  padding: 1.25rem 0.5rem 0 0.5rem;
}
.prizerList ul {
  display: flex;
  align-items: center;
  flex-direction: row;
  /* justify-content: center; */
  flex-wrap: wrap;
}
.prizerList ul li {
  color: #B4372A;
}
.prizerList ul li:nth-child(2n) {
  text-align: right;
}
.prizerList ul li span {
  width: 50%;
  padding: 0 0.125rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.havePrize {
  position: relative;
  top: 50%;
  left: 50%;
  width: 14.75rem;
  height: 14.675rem;
  margin-top: -7.3375rem;
  transform: translateX(-50%);
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/interaction/new/havePrize-bg.png") no-repeat center center;
  background-size: contain;
}
.havePrize-close {
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.havePrize-msg {
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
}
.havePrize-msg.win {
  color: #F65D39;
}
.havePrize-msg.nowin {
  color: #666666;
}
.havePrize-img {
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
}
.havePrize-img img {
  display: block;
  width: 100%;
  height: 100%;
}
.havePrize-name {
  top: 8.35rem;
  left: 50%;
  transform: translateX(-50%);
}
.havePrize-btn {
  left: 50%;
  bottom: 1.6rem;
  width: 7.4rem;
  height: 1.6rem;
  transform: translateX(-50%);
  background: url("../../../assets/interaction/new/continue-btn.png") no-repeat center center;
  background-size: contain;
}
.havePrize-get {
  bottom: 0.5rem;
  color: #f5d199;
  left: 50%;
  transform: translateX(-50%);
  color: #F5D199;
}
.input-right {
  height: 100%;
  border: 0;
  background: none;
  outline: none;
}
/deep/ .modal {
  z-index: 99 !important;
}
.havePriz-comit {
  background: #fd5709;
}
.picker-address /deep/ .vux-popup-picker-placeholder {
  font-size: 0.6rem;
}
.address-ship {
  color: #fd5709;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  font-size: 0.6rem;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-size: 0.6rem;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-size: 0.6rem;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-size: 0.6rem;
}
.sureBox  /deep/ .my-content {
  border-radius: 0.5rem;
}
.sureBox  /deep/ .bg-masker{
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index: -1;
}
.detailsModal /deep/ .my-content {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}
.big-wheel-con {
  position: relative;
  width: 100%;
  height: 100%;
  .lottery_lion {
    position: absolute;
    bottom: -2.3rem;
    right: 0;
    width: 3.45rem;
    height: 6.325rem;
    background: url('../../../assets/interaction/new/lottery_lion.png') no-repeat center center;
    background-size: contain;
    z-index: 1;
  }
}
.big-wheel-box {
  position: relative;
  text-align: center;
  font-size: 0;
  width: 13.4rem;
  height: 13.4rem;
  background-image: url('../../../assets/interaction/new/disk_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  // padding: 1.25rem;
  margin: 0 auto;
  z-index: 1;
  .prize-name {
    position: absolute;
    left: .13rem;
    right: .13rem;
    top: .2rem;
    font-size: 0.45rem;
    text-align: center;
    color: #D8394C;
  }
  .prize-img {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.1rem;
    height: 1.1rem;
  }
}
.big-wheel-bottom-con {
  position: absolute;
  left: 50%;
  bottom: -2.5rem;
  width: 10.35rem;
  height: 3.275rem;
  transform: translateX(-50%);
  .big-wheel-bottom {
    position: relative;
    .lottery_points {
      position: absolute;
      top: 0.95rem;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-size: 0.5rem;
      white-space: nowrap;
    }
    .remain-times {
      position: absolute;
      left: 50%;
      bottom: 0.25rem;
      transform: translateX(-50%);
      color: #fff;
      font-size: 0.5rem;
    }
    .lottery_cloud {
      position: absolute;
      top: .8rem;
      left: -2.8rem;
      width: 14rem;
      height: 3.1rem;
      background: url("../../../assets/interaction/new/lottery_cloud.png") no-repeat center center;
      background-size: contain;
    }
  }
}
.big-wheel-btn {
  position: absolute;
  left: 50%;
  top: 3.4rem;
  width: 4.45rem;
  height: 5.525rem;
  transform: translateX(-50%);
}
.big-wheel-prizers {
  width: 100%;
  height: 6rem;
}
.big-wheel-boxRoite {
  position: absolute;
  left: 50%;
  top: 4.325rem;
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #fff;
}
</style>